<template>
  <div>
      <a-modal :visible="visible" :title="tableTitle" :width="width" @cancel="cancelVisible">
            <a-table
              :columns="proColumns"
              :data-source="proData"
              :pagination="pagination" 
              bordered
              size="middle"
              :rowKey="rowKey"             
            >
            <!-- :rowKey="projectNo" -->
              <!-- <template slot="totalBudget" slot-scope="text" v-if="text">
                        <a-statistic :value="text"/>
                    </template>
                    <template slot="projectNo" slot-scope="text, record">
                        <span class="btn-span" @click="handleClick(record)">{{text}}</span>
              </template>-->
            </a-table>
            <template slot="footer">
                <a-button key="back" @click="cancelVisible">
                关闭
                </a-button>
            </template>
        </a-modal>    
  </div>
</template>

<script>
export default {
  name: 'ProjectDetTable',
  props: {
    proColumns: {
      type: Array,
      default: () => []
    },
    proData: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Boolean,
      default: false
    },
    width:{
      type: String,
      default: '50vw'
    },
    visible: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: 'projectNo'
    },
    tableTitle: {
      type: String,
      default: ''
    },
  },
  methods: {
    cancelVisible(){
      this.$emit('closeVisible', false)
    },
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/less/hte-main.less';
</style>